<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>清算excel导入oracle</title>
    <script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.min.js"></script>
    <script>
        function addRows() {
            //记录总共添加几行
            document.getElementById("reC").value = parseInt(document.getElementById("reC").value) + 1;//获取中的行数
            //添加一行
            var i = parseInt(myTable.rows.length);
            var newTr = myTable.insertRow();
            //添加列
            var newTd0 = newTr.insertCell();
            var newTd1 = newTr.insertCell();
            var newTd2 = newTr.insertCell();
            var newTd3 = newTr.insertCell();
            //设置列内容和属性
            newTd0.innerHTML = '<input type="text" id="dpDate' + i + '_dpDate' + i + '" style="width:98%;" title="execl字段名" value="" />';
            newTd1.innerHTML = '<input type="text" id="txtR' + i + '_1" style="width:98%;" title="数据库字段名"  value=""/>';
            newTd2.innerHTML = '<select maxlength="255" style="width:180px;" name = "columnType"><option value="VARCHAR2" selected>VARCHAR2</option><option value="INTEGER">INTEGER</option><option value="NUMBER">NUMBER</option></select>';
            newTd3.innerHTML = '<input type="submit" class="btn btn-mini btn-warning"  value="删除该行" onclick="deleRow()" id="btnDele' + i + '" />';
            return false;
        }

        //删除一行
        function deleRow() {
            //获得行索引
            //两个parentElement分别是TD和TR，rowIndex是TR的属性
            var cGetRow = window.event.srcElement.parentElement.parentElement.rowIndex;
            myTable.deleteRow(cGetRow);
            return false;
        }

        //保存表格中最新的值
        function saveTableValue() {
            var myTable = document.getElementById("myTable");
            tableValue="";
            for (var i=1;i<myTable.rows.length;i++){
                var value1 = myTable.rows[i].cells[0].getElementsByTagName("input")[0].value;//execl字段名
                var value2 = myTable.rows[i].cells[1].getElementsByTagName("input")[0].value;//数据库字段名
                var value3 = myTable.rows[i].cells[2].getElementsByTagName("select")[0].value;//字段类型
                var rowValue=value1+">>>"+value2+"-->"+value3; //">>>""-->"来连接
                tableValue=tableValue+rowValue+"&&";
            }
            if (tableValue!=null){
                tableValue = tableValue.substring(0,tableValue.lastIndexOf("&&"));
            }
            alert(tableValue);
            $("#data").val(tableValue);//把表格的值付给input
        }

    </script>
</head>
<body>
<h2>清算excel导入oracle</h2>
<form th:action="@{/file/uploadByJarDeploy}" method="post" enctype="multipart/form-data">
    <input type="file" name="file"/>
    <input type="submit" value="上传文件" onclick="saveTableValue();"><br>
    表名：<input name="tableName" type="text" style="width: 180px"/>
    序列名：<input name="seqName" type="text" placeholder="不填默认[SEQ_表名]" style="width: 180px"/><br>
    <input id="data" name="data" type="hidden"/>
    <table cellpadding="0" cellspacing="0" id="myTable">
        <tr>
            <th>execl字段名</th>
            <th>数据库字段名</th>
            <th>字段类型</th>
            <th>操作</th>
        </tr>
        <tr>
            <td><input type="text" value="" maxlength="255" placeholder="" title="execl字段名" style="width:98%;"/></td>
            <td><input type="text" value="" maxlength="255" placeholder="" title="数据库字段名" style="width:98%;"/></td>
            <td><select maxlength="255" style="width:180px;" name = "columnType">
                <option value="VARCHAR2" selected>VARCHAR2</option>
                <option value="INTEGER">INTEGER</option>
                <option value="NUMBER">NUMBER</option>
            </select></td>
            <td><input type="hidden" id="reC" value="1" />
                <input type="button" class="btn btn-mini btn-info" onclick="addRows();" value="增加行"/>
                <input type="button" class="btn btn-mini btn-danger" onclick="saveTableValue();" value="表格数据"/>
            </td>
        </tr>
    </table>
</form>
</body>
</html>
